<template>
	<Container>
		<view class="box">
			<image v-show="questionPress" class="image" :class="{ articleLight: comparedPress }" :src="assignment.comparedArticle.imageUrl" mode="aspectFit"></image>
			<Numbers v-if="numberShow" @numberEnd="numberEnd" :answerTexts="assignment.answerTexts" />
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import { compared } from '../../../common/mixins/assignmentCompared.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Numbers from '../number.vue'
export default {
	mixins: [mixins, compared],
	components: { AudioIcon, Question, Container, Numbers },
	data() {
		return {
			numberShow: false
		}
	},
	watch: {
		questionPress: function(bool) {
			this.numberShow = !bool
		}
	},
	methods: {
		numberEnd: function(bool) {
			this.$parent.next({
				isSure: bool
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.box
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	justify-content center
	align-items center
	position relative
	.image
		width 75%
		height 75%
</style>
